<script setup>
import WOW from "wow.js";
import {ref, onMounted, reactive, onUpdated} from "vue";
import {useRouter, useRoute} from "vue-router";

defineProps({
  msg: String,
});
const router = useRouter();

const handleSelect = (e) => {
  console.log(e);
  router.push({
    name: `${e}`,
  });
};

const denglu = () => {
  activeIndex2.value = 88;
  router.push({
    name: "login",
  });
};

const activeName = ref("first");
let input = ref("");
const activeIndex2 = ref("1");
// 产品中心
let data = reactive({
  xaingImg: [
    {
      msg: "小间距",
      url: "http://pmt5f46b3.pic13.websiteonline.cn/upload/Procut-SmallP-img01-new1.png",
    },
    {
      msg: "小间距",
      url: "http://pmt5f46b3.pic13.websiteonline.cn/upload/Procut-SmallP-img01-new1.png",
    },
    {
      msg: "小间距",
      url: "http://pmt5f46b3.pic13.websiteonline.cn/upload/Procut-SmallP-img01-new1.png",
    },
    {
      msg: "小间距",
      url: "http://pmt5f46b3.pic13.websiteonline.cn/upload/Procut-SmallP-img01-new1.png",
    },
  ],
});

onMounted(() => {
  var wow = new WOW({
    boxClass: "wow", // animated element css class (default is wow)
    animateClass: "animated", // animation css class (default is animated)
    offset: 0, // distance to the element when triggering the animation (default is 0)
    mobile: true, // trigger animations on mobile devices (default is true)
    live: true, // act on asynchronously loaded content (default is true)
    callback: function () {
      // the callback is fired every time an animation is started
      // the argument that is passed in is the DOM node being animated
    },
    scrollContainer: null, // optional scroll container selector, otherwise use window,
    resetAnimation: true, // reset animation on end (default is true)
  });
  wow.init();
});

onUpdated(() => {
  console.log(12);
  var wow = new WOW({
    boxClass: "wosw", // animated element css class (default is wow)
    animateClass: "animated", // animation css class (default is animated)
    offset: 0, // distance to the element when triggering the animation (default is 0)
    mobile: true, // trigger animations on mobile devices (default is true)
    live: true, // act on asynchronously loaded content (default is true)
    callback: function () {
      // the callback is fired every time an animation is started
      // the argument that is passed in is the DOM node being animated
    },
    scrollContainer: null, // optional scroll container selector, otherwise use window,
    resetAnimation: true, // reset animation on end (default is true)
  });
  wow.init();
});
const containerRef = ref(null);
// let keyword =ref('睢阳区南京路122号')
// let location=ref("商丘市")
import logo from "./components/logo.vue";
import zouma from "./components/zouma.vue";
import bannderTitle from "./components/bannderTitle.vue";
import anli from "./components/anli.vue";
import guantuwomen from "./components/guantuwomen.vue";
import fuwuzhici from "./components/fuwuzhichi.vue";
import hawer from "./header.vue";
</script>

<template>
  <hawer :containerRef="containerRef" />
  <div class="main">
    <div ref="containerRef">
      <zouma id="part1" />
      <div class="clace">
        <bannderTitle id="part2">功能介绍</bannderTitle>
        <ul class="xiangc">
          <li class="wow bounceInUp">
            <p style="font-weight: 700">店铺数据展示</p>
            <p style="margin-top: 10px; font-size: 12px">
              竞争对手分析:实时采集Ozon等平台商品数据，帮助您调整参数以优化销售策略。
            </p>
            <img
              style="width: 50px; height: 50px; margin-top: 10px"
              src="../../assets/iconPark-internal-data 1.svg"
              alt=""
            />
          </li>

          <li class="wow bounceInUp">
            <p style="font-weight: 700">客户服务</p>
            <p style="margin-top: 10px; font-size: 12px">
              自动提醒功能：
              及时提醒买家完成订单、填写必要信息和评价商品，提升客户体验。
            </p>
            <img
              style="width: 50px; height: 50px; margin-top: 10px"
              src="../../assets/if-support-faq.svg"
              alt=""
            />
          </li>

          <li class="wow bounceInUp">
            <p style="font-weight: 700">财务管理</p>
            <p style="margin-top: 10px; font-size: 12px">
              物流成本计算：
              一键查询物流价格，快速比较不同物流服务，确保最优利润。
            </p>

            <img
              style="width: 50px; height: 50px; margin-top: 10px"
              src="../../assets/iconPark-currency.svg"
              alt=""
            />
          </li>
          <li class="wow bounceInUp">
            <p style="font-weight: 700">行业分析</p>
            <p style="margin-top: 10px; font-size: 14px">
              热销产品推荐：
              分析竞品销售情况，推荐蓝海和潜力商品，助力业务增长。
            </p>

            <img
              style="width: 50px; height: 50px; margin-top: 10px"
              src="../../assets/iconPark-analysis 1.svg"
              alt=""
            />
          </li>
          <li class="wow bounceInUp">
            <p style="font-weight: 700">关键词优化</p>
            <p style="margin-top: 10px; font-size: 14px">
              SEO优化： 提供热门搜索关键词和潜力关键词，优化商品上架表现。
            </p>
            <img
              style="width: 50px; height: 50px; margin-top: 10px"
              src="../../assets/iconPark-smart-optimization.svg"
              alt=""
            />
          </li>
          <li class="wow bounceInUp">
            <p style="font-weight: 700">仓储服务</p>
            <p style="margin-top: 10px; font-size: 14px">
              实时监控： 提供准确的重量和利润计算，帮助控制物流成本，避免超支。
            </p>
            <img
              style="width: 50px; height: 50px; margin-top: 10px"
              src="../../assets/if-box 1.svg"
              alt=""
            />
          </li>
        </ul>
      </div>
      <div class="clace">
        <bannderTitle id="part3">关于我们</bannderTitle>
        <div class="tab wow slideInDown" style="margin-top: 20px">
          <el-tabs
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane label="小间距显示屏案例" name="first">
              <anli />
            </el-tab-pane>
            <el-tab-pane label="LED异形屏案例" name="second"
              ><anli
            /></el-tab-pane>
            <el-tab-pane label="LED户外显示屏案例" name="third"
              ><anli
            /></el-tab-pane>
            <el-tab-pane label="室内显示屏案例" name="fourth"
              ><anli
            /></el-tab-pane>
            <el-tab-pane label="LED租赁屏案例" name="fourths"
              ><anli
            /></el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>

    <router-view />

    <!-- <div class="clace ">
    <bannderTitle>产品中心</bannderTitle>
    <ul class="xiangc">
      <li class="wow bounceInUp" v-for="(item,index) in data.xaingImg" :key="index">
      <img :src="item.url" alt="">
      <p>{{ item.msg }}</p>
      </li>
     
    </ul>
  </div>
  <div class="clace ">
    <bannderTitle>经典案例</bannderTitle>
    <div class="tab wow slideInDown" style="margin-top: 20px;">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="小间距显示屏案例" name="first">
<anli />

    </el-tab-pane>
    <el-tab-pane label="LED异形屏案例" name="second"><anli /></el-tab-pane>
    <el-tab-pane label="LED户外显示屏案例" name="third"><anli /></el-tab-pane>
    <el-tab-pane label="室内显示屏案例" name="fourth"><anli /></el-tab-pane>
    <el-tab-pane label="LED租赁屏案例" name="fourths"><anli /></el-tab-pane>
  </el-tabs>
   </div>
  </div> -->
  </div>
</template>

<style scoped>
.lianright {
  width: 60%;
  height: 400px;
  background-color: red;
}
.lianxiang {
  margin-top: 30px;
}
.lianxiang li {
  font-size: 18px;
  line-height: 50px;
  color: rgb(102, 102, 102);
}
.fandh {
  font-size: 24px;
  font-weight: 700;
  color: rgb(127, 127, 127);
}
.sdsda {
  font-size: 16px !important;
}
.lianty {
  text-align: center;
  font: 15px/140% Arial, "宋体", Helvetica, sans-serif, Verdana;
  color: #5a5a5a;
}
.boleft {
  width: 40%;
  height: 400px;
  padding: 20px;
}
.lianxi {
  display: flex;

  width: 1200px;
  margin: auto;
  margin-top: 20px;
  border: 1px solid rgb(243, 243, 243);

  background-color: rgb(251, 251, 251);
}
.bm-view {
  width: 100%;

  height: 100%;
}

.xiangc {
  background-color: rgb(251, 251, 251);
  display: flex;
  margin-top: 30px;
  justify-content: space-between;
}
.xiangc li {
  padding: 20px 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
  background-color: rgb(232, 245, 244);
  cursor: pointer;
  width: 16%;
  height: 200px;
}
.xiangc li img {
  width: 100%;
  height: 80%;
  transition: all 0.2s linear;
}
/* .xiangc li:hover{
  img{
    transition: all .2s linear;
   transform: scale(1.1);
  }
} */

.xiangc li p {
  text-align: center;
  font-size: 16px;
}

.clace {
  padding: 30px;
  width: 1200px;
  margin: auto;
  /* width: 200px;
height: 200px; */
  /* background-color: red; */
}
.serch {
  display: flex;
  align-items: center;
  width: 180px;
}
.header {
  position: absolute;
  /* background-color:rgba(255,255,255,.5); */
  /* position: absolute;  */
  width: 100%;
  z-index: 99999;
  display: flex;
  justify-content: flex-end;
  /* flex-direction: row-reverse; */
  padding: 0px 30px;
  /* background-color: rgb(0, 0, 0,.2); */
}
</style>
